<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="./css/base.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            background: #F6F6F6;
        }

        .container {
            width: 100%;
            height: 100%;
            padding: 1rem;
        }

        .tips {
            width: 100%;
            position: relative;
            background: #fff;
            border-radius: 10px;
            padding: 1rem;
            top: 7rem;

        }

        .mian {
            background: #fff;
            position: relative;
            top: 8rem;
            padding: 1rem;
        }

        .login-box .form-tit {
            font-size: 1.3rem;
            text-align: center;
            font-weight: bold;
            padding: 1px 1px 12px 1px;
        }

        .login-input .login-group {
            position: relative;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 1px #ddd solid;
        }

        .login-input .login-group input {
            outline: none;
            border: none;
            padding: 0.6rem;
            margin-left: 0.6rem;
            font-size: 1rem;
        }

        .btn-login {
            background-color: #169bd4;
            width: 70%;
            border: none;
            padding: 10px;
            color: #fff;
            font-size: 15px;
            display: block;
            margin: 25px auto;
            border-radius: 20px;
        }

        .tips-bottom {
            text-align: center;
        }

        .picker .picker-panel .wheel-wrapper .wheel {
            font-size: 1rem !important;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="tips">
            <p>视聘空间合作院校的学生，请选择院校并使用学号进行登录qweqweqweqweqeqeqweq
                视聘空间合作院校的学生，请选择院校并使用学号进行登录qweqweqweqweqeqeqweq
            </p>
        </div>
        <div class="mian">
            <form action="www.baidu.com" method="get">
                <div class="login-box">
                    <div class="form-tit">注册</div>

                    <div class="login-input">
                        <div class="login-group">
                            <span>学校</span>
                            <input type="text" id="school" name="school" value="" placeholder="请选择" />
                        </div>
                        <div class="login-group">
                            <span>学院</span>
                            <input type="text" id="college" name="college" value="" placeholder="请选择" />
                        </div>
                        <div class="login-group">
                            <span>专业</span>
                            <input type="text" id="major" name="major" value="" placeholder="请选择" />
                        </div>
                        <div class="login-group">
                            <span>姓名</span>
                            <input type="text" name="username" value="" placeholder="请输入" />
                        </div>
                        <div class="login-group">
                            <span>账号</span>
                            <input type="text" name="account" value="" placeholder="学号/账号" />
                        </div>
                        <button class="btn-login" type="submit">注册</button>
                    </div>
                </div>
            </form>
            <div class="tips-bottom" id="login">
                <p>
                    回登陆>>
                </p>
            </div>
        </div>

    </div>
</body>
<script src="js/picker.min.js"></script>
<script>
    var schooldata = [];
    var collegedata = [];
    var majordata = [];
    //学校
    var nameEl = document.getElementById('school');
    schooldata = [//picker的列表数据
        {
            text: '请选择',
            value: 1
        }, {
            text: '未来大学',
            value: 2
        }, {
            text: '过去大学',
            value: 3
        }
    ];
    var picker = new Picker({
        data: [schooldata],
        selectedIndex: [0],
    });
    picker.on('picker.select', function (selectedVal, selectedIndex) {
        var selected = schooldata[selectedIndex[0]].text;//选择后做些事情，这里是改变了nameEL的内容
        console.log('selected: ', selected);
        nameEl.setAttribute("placeholder", selected);
        nameEl.setAttribute("value", selected);
    })

    nameEl.addEventListener('click', function () {
        picker.show();//控制picker可见性
    });
    //学院
    var nameEl2 = document.getElementById('college');
    collegedata = [//picker的列表数据
        {
            text: '计算机',
            value: 1
        }, {
            text: '软件',
            value: 2
        }, {
            text: '临床',
            value: 3
        }
    ];
    var picker2 = new Picker({
        data: [collegedata],
        selectedIndex: [0],
    });
    picker2.on('picker.select', function (selectedVal, selectedIndex) {
        var selected = collegedata[selectedIndex[0]].text;//选择后做些事情，这里是改变了nameEL的内容
        console.log('selected: ', selected);
        nameEl2.setAttribute("placeholder", selected);
        nameEl2.setAttribute("value", selected);
    })
    picker.on('picker.valuechange', function (selectedVal, selectedIndex) {
        //选取元素发生改变做些事情

    });

    nameEl2.addEventListener('click', function () {
        picker2.show();//控制picker可见性
    });

    //专业
    var nameEl3 = document.getElementById('major');
    majordata = [//picker的列表数据
        {
            text: '4',
            value: 1
        }, {
            text: '2',
            value: 2
        }, {
            text: '1',
            value: 3
        }
    ];
    var picker3 = new Picker({
        data: [majordata],
        selectedIndex: [0],
    });
    picker3.on('picker.select', function (selectedVal, selectedIndex) {
        var selected = majordata[selectedIndex[0]].text;//选择后做些事情，这里是改变了nameEL的内容
        console.log('selected: ', selected);
        nameEl3.setAttribute("placeholder", selected);
        nameEl3.setAttribute("value", selected);
    })

    nameEl3.addEventListener('click', function () {
        picker3.show();//控制picker可见性
    });
    //跳转
    $('#login').click(function () {
        $(location).attr('href', 'http://www.baidu.com');
    })
</script>

</html>